<template>
  <a-form @submit="handleSubmit" :form="form" class="form">
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="机构ID">
          <a-input
            placeholder="请输入机构ID"
            :disabled="disabled"
            v-decorator="[
              'gnrlid',
              {rules: [{ required: true, message: '请输入机构ID', whitespace: true},{ validator: checkGnrlid, trigger: 'change' }]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="单位名称">
          <a-input
            placeholder="请输入单位名称"
            :disabled="disabled"
            v-decorator="[
              'orgname',
              {rules: [{ required: true, message: '请输入单位名称', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="单位性质">
          <a-select :disabled="disabled" placeholder="请选择单位性质" v-decorator="[ 'orgnature', {rules: [{ required: true, message: '请选择单位性质'}]} ]">
            <a-select-option v-for="item in orgNatureData" :key="item.id" :value="item.id">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="标识注册名称合规实施">
          <a-input
            :disabled="disabled"
            placeholder="请输入标识注册名称合规实施"
            v-decorator="[
              'idregnalmp',
              {rules: [{ required: false, message: '请输入标识注册名称合规实施', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
<!--      <a-col :lg="6" :md="12" :sm="24">-->
<!--        <a-form-item label="标识前缀或范围">-->
<!--          <a-input-->
<!--            placeholder="请输入标识前缀或范围"-->
<!--            v-decorator="[-->
<!--              'prefix',-->
<!--              {rules: [{ required: true, message: '请输入标识前缀或范围', whitespace: true}]}-->
<!--            ]" />-->
<!--        </a-form-item>-->
<!--      </a-col>-->
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item
          label="省">
          <a-select :disabled="disabled" @change="changeProvince" placeholder="请选择省份" v-decorator="[ 'orgaddrprovinceId', {rules: [{ required: true, message: '请选择省份'}]} ]">
            <a-select-option v-for="item in addressProvince" :key="item.id" :value="item.id">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item
          label="市">
          <a-select :disabled="disabled" @change="changeCity" placeholder="请选择城市" v-decorator="[ 'orgaddrcityId', {rules: [{ required: true, message: '请选择城市'}]} ]">
            <a-select-option v-for="item in addressCity" :key="item.id" :value="item.id">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item
          label="区">
          <a-select :disabled="disabled" placeholder="请选择区县" v-decorator="[ 'orgaddrcountyId', {rules: [{ required: true, message: '请选择区县'}]} ]">
            <a-select-option v-for="item in addressCounty" :key="item.id" :value="item.id">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="单位详细地址">
          <a-input
            :disabled="disabled"
            placeholder="请输入单位详细地址"
            v-decorator="[
              'orgaddr',
              {rules: [{ required: true, message: '请输入单位详细地址', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="单位证件类型">
          <a-select :disabled="disabled" placeholder="请选单位证件类型" v-decorator="[ 'orgcrttype', {rules: [{ required: true, message: '请选择单位证件类型'}]} ]">
            <a-select-option v-for="item in orgCrtTypeData" :key="item.id" :value="item.id">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="单位证件号">
          <a-input
            :disabled="disabled"
            placeholder="请输入单位证件号"
            v-decorator="[
              'orgcrtcode',
              {rules: [{ required: true, message: '请输入单位证件号', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="法定代表人姓名">
          <a-input
            :disabled="disabled"
            placeholder="请输入法定代表人姓名"
            v-decorator="[
              'legalname',
              {rules: [{ required: true, message: '请输入法定代表人姓名', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="法定代表人证件类型">
          <a-select :disabled="disabled" placeholder="请选法定代表人证件类型" v-decorator="[ 'legalcrttype', {rules: [{ required: true, message: '请选择法定代表人证件类型'}]} ]">
            <a-select-option v-for="item in legalCrtTypeData" :key="item.id" :value="item.id">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="法定代表人证件号">
          <a-input
            :disabled="disabled"
            placeholder="请输入法定代表人证件号"
            v-decorator="[
              'legalcrtno',
              {rules: [{ required: true, message: '请输入法定代表人证件号', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="单位简介">
          <a-input
            :disabled="disabled"
            placeholder="200字左右企业简介，包括公司名称、成立时间、所在省市、主营业务、主要用户群体、行业地位等信息"
            v-decorator="[
              'orgdesc',
              {rules: [{ required: false, message: '请输入单位简介', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
<!--        <a-form-item label="行业门类">-->
<!--          <a-input-->
<!--            placeholder="请输入行业门类"-->
<!--            v-decorator="[-->
<!--              'industryCategory',-->
<!--              {rules: [{ required: true, message: '请输入行业门类', whitespace: true}]}-->
<!--            ]" />-->
<!--        </a-form-item>-->
        <a-form-item label="行业门类">
          <a-select :disabled="disabled" @change="changeCategory" placeholder="请选择行业门类" v-decorator="[ 'industrycategory', {rules: [{ required: true, message: '请选择行业门类'}]} ]">
            <a-select-option v-for="item in CategoryData" :key="item.id + ''" :value="item.id + ''">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
<!--        <a-form-item label="行业大类">-->
<!--          <a-input-->
<!--            placeholder="请输入行业大类"-->
<!--            v-decorator="[-->
<!--              'industrySpecific',-->
<!--              {rules: [{ required: true, message: '请输入行业大类', whitespace: true}]}-->
<!--            ]" />-->
<!--        </a-form-item>-->
        <a-form-item label="行业大类">
          <a-select :disabled="disabled" placeholder="请选择行业大类" v-decorator="[ 'industryspecific', {rules: [{ required: true, message: '请选择行业大类'}]} ]">
            <a-select-option v-for="item in specificData" :key="item.id + ''" :value="item.id + ''">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="联系人名称">
          <a-input
            :disabled="disabled"
            placeholder="请输入联系人名称"
            v-decorator="[
              'contactname',
              {rules: [{ required: true, message: '请输入联系人名称', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="联系人手机号">
          <a-input
            :disabled="disabled"
            placeholder="请输入联系人手机号"
            v-decorator="[
              'contactphone',
              {rules: [
                { required: true, message: '请输入联系人手机号', whitespace: true},
                { pattern: new RegExp(/(1[0-9][0-9])\d{8}/), message: '手机号码格式不正确'}
                ]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="联系人证件类型">
          <a-select :disabled="disabled" placeholder="请选择联系人证件类型" v-decorator="[ 'contactcrttype', {rules: [{ required: false, message: '请选择联系人证件类型'}]} ]">
            <a-select-option v-for="item in contactCrtTypeData" :key="item.id" :value="item.id">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="联系人证件号">
          <a-input
            :disabled="disabled"
            placeholder="请输入联系人证件号"
            v-decorator="[
              'contactcrtno',
              {rules: [{ required: true, message: '请输入联系人证件号', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="联系人邮箱">
          <a-input
            :disabled="disabled"
            placeholder="请输入联系人邮箱"
            v-decorator="[
              'contactemail',
              {rules: [{ required: true, message: '请输入联系人邮箱', whitespace: true},
              { pattern: new RegExp(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/), message: '邮箱格式不正确'}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="官方网站">
          <a-input
            :disabled="disabled"
            placeholder="请输入官方网站"
            v-decorator="[
              'website',
              {rules: [{ required: false, message: '请输入官方网站', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="注册机关">
          <a-input
            :disabled="disabled"
            placeholder="请输入注册机关"
            v-decorator="[
              'regauthority',
              {rules: [{ required: false, message: '请输入注册机关', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="注册资本">
          <a-input
            :disabled="disabled"
            placeholder="请输入注册资本"
            v-decorator="[
              'regcapital',
              {rules: [{ validator: this.checkRegCapital, trigger: 'change' }]}
            ]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="成立日期">
          <a-date-picker
            :disabled="disabled"
            :format="dateFormat"
            style="width: 100%"
            v-decorator="[
              'establishdate',
              {rules: [{ required: false, message: '请选择成立日期'}]}
            ]"/>
          <br />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="有效期">
          <a-input
            :disabled="disabled"
            placeholder="请输入有效期"
            v-decorator="[
              'periodvalidity',
              {rules: [{ required: false, message: '请输入有效期', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="法定代表人手机号">
          <a-input
            :disabled="disabled"
            placeholder="请输入法定代表人手机号"
            v-decorator="[
              'legalphone',
              {rules: [{ pattern: new RegExp(/(1[0-9][0-9])\d{8}/), message: '手机号码格式不正确'}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="法定代表人邮箱">
          <a-input
            :disabled="disabled"
            placeholder="请输入法定代表人邮箱"
            v-decorator="[
              'legalemail',
              {rules: [{ pattern: new RegExp(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/), message: '邮箱格式不正确'}]}
            ]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="法定代表人传真">
          <a-input
            :disabled="disabled"
            placeholder="请输入法定代表人传真"
            v-decorator="[
              'legalfax',
              {rules: [{ required: false, message: '请输入法定代表人传真', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="数据托管单位">
          <a-input
            :disabled="disabled"
            placeholder="请输入数据托管单位"
            v-decorator="[
              'datahostingorg',
              {rules: [{ required: false, message: '请输入数据托管单位', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="服务托管单位">
          <a-input
            :disabled="disabled"
            placeholder="请输入服务托管单位"
            v-decorator="[
              'servhostingorg',
              {rules: [{ required: false, message: '请输入服务托管单位', whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item v-if="showSubmit">
      <a-button htmlType="submit" >Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  import {listSysAddress} from '@/api/address'
  import {listIndustryClassification} from '@/api/classification';
  import {getOrganizationInfo} from '@/api/organization';
export default {
  name: 'OrganizationForm',
  props: {
    showSubmit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      orgNatureData:[{id:1,label:'国有控股'},{id:2,label:'民营控股'},{id:3, label: '外商控股'},{id:4,label:'事业单位'},{id:5,label:'民营非营利组织'}],
      orgCrtTypeData:[{id:'1',label:'统一社会信用代码'},{id:'2', label: '其他'}],
      legalCrtTypeData:[{id:1,label:'中国居民身份证'},{id:2, label: '护照'},{id:3, label: '其他'}],
      contactCrtTypeData:[{id:'1',label:'中国居民身份证'},{id:'2', label: '护照'},{id:'3', label: '其他'}],
      dateFormat: 'YYYY-MM-DD',
      addressProvince:[],
      addressCity:[],
      addressCounty:[],
      CategoryData:[],
      specificData:[],
      disabled: false,
      id: '',
    }
  },
  mounted() {
    this.listSysAddress(0)
    this.listIndustryClassification(0);
  },
  methods: {
    getDetail(obj) {
      const {type, value} = obj
      if (type === 'view') {
        this.disabled = true
        this.getInfo(JSON.parse(value).gnrlid)
      } else if (type === 'edit') {
        this.disabled = false;
        this.getInfo(JSON.parse(value).gnrlid)
      } else if (type === 'add') {
        this.disabled = false;
        this.form.resetFields()
        this.id = ''
      }
    },
    getInfo(gnrlid) {
      let that = this
      getOrganizationInfo(gnrlid).then(res => {
        const data = res.data
        const {orgaddrcityId, orgaddrprovinceId, industrycategory} = data
        if (orgaddrprovinceId) {
          listSysAddress(orgaddrprovinceId).then(res => {
            this.addressCity = res.data
          })
        }
        if (orgaddrcityId) {
          listSysAddress(orgaddrcityId).then(res => {
            this.addressCounty = res.data
          })
        }
        if (industrycategory) {
          listIndustryClassification(industrycategory).then(res => {
            this.specificData = res.data
          })
        }
        that.$nextTick(()=>{
          setTimeout(() =>{
            that.id = data.id
            that.form.setFieldsValue(data)
          },0)
        });
      });
    },
    checkRegCapital (rule, value, callback){
      if (value && !new RegExp(/^\+?[1-9][0-9]*$/).test(value)) {
        callback(new Error('请输入大于0的数字'));
      } else {
        callback();
      }
    },
    checkGnrlid (rule, value, callback){
      if (value && !new RegExp(/[-_A-Za-z0-9]{1,64}/).test(value)) {
        callback(new Error('格式不正确'));
      } else {
        callback();
      }
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$notification['error']({
            message: 'Received values of form:',
            description: values
          })
        }
      })
    },
    validate (rule, value, callback) {
      const regex = /^user-(.*)$/
      if (!regex.test(value)) {
        callback(new Error('需要以 user- 开头'))
      }
      callback()
    },
    listSysAddress(id){
      listSysAddress(id).then(res =>{
        this.addressProvince = res.data
      })
    },
    changeProvince(value){
      listSysAddress(value).then(res =>{
        this.addressCity = res.data
      })
    },
    changeCity(value){
      listSysAddress(value).then(res =>{
        this.addressCounty = res.data
      })
    },
    listIndustryClassification(id){
      listIndustryClassification(id).then(res => {
        this.CategoryData = res.data
        this.specificData = []
      })
    },
    changeCategory(id){
      listIndustryClassification(id).then(res => {
        this.specificData = res.data
        this.form.setFieldsValue({industrySpecific: ''})
      })
    },
  }
}
</script>

<style scoped>

</style>
